<template>
  <div class="container">
    <div class="login-form">
      <!-- 左边logo -->
      <div class="left">
        <div class="pic">
          <img src="../assets/image/test2.jpeg" alt="" />
        </div>
      </div>
      <!-- 右边表单部分 -->
      <div class="right">
        <div class="title_container"><h2>FPCMS后台管理系统</h2></div>
        <a-form-model layout="vertical" :model="formInline">
          <a-form-model-item>
            <a-input
              v-model="formInline.user"
              placeholder="用户名"
              size="large"
            >
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-input
              v-model="formInline.password"
              type="password"
              placeholder="密码"
              size="large"
              style="margin-top: 10px"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-model-item>
          <a-form-model-item>
            <!-- 验证码 -->
            <a-input
              v-model="formInline.user_identifyingCode"
              placeholder="验证码"
              size="large"
              style="margin-top: 10px; width: 180px; padding-left: 15px"
            >
            </a-input>
            <img
              @click="getidentifyingCode"
              :src="identifyingCode"
              style="width: 120px; height: 40px; margin-left: 20px"
            />
          </a-form-model-item>
          <a-form-model-item>
            <a-button
              @click="checkLogin"
              type="primary"
              :disabled="
                formInline.user === '' ||
                formInline.password === '' ||
                formInline.user_identifyingCode == ''
              "
            >
              登录
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        password: "",
        // 用户输入的验证码
        user_identifyingCode: "",
      },
      // 后端验证码
      identifyingCode: "",
      // 判断验证码 对错
      identifyingCode_token: "",
    };
  },
  created() {
    this.getidentifyingCode();
  },
  methods: {
    // 登录请求
    async checkLogin() {
      const res = await this.$http.post("/admin/login", {
        username: this.formInline.user,
        password: this.formInline.password,
        token: this.identifyingCode_token,
        code: this.formInline.user_identifyingCode,
      });
      if (res.data.code == 200) {
        console.log(res.headers.authorization);
        window.localStorage.setItem("authorization", res.headers.authorization);
        this.common.notify("success", "登录成功");
        this.getRoleMessage();
        // this.$message.success("登录成功");
        this.$router.push({
          name: "Home",
        });
      } else {
        this.getidentifyingCode();
      }
    },
    // 获取当前用户的信息 将权限放入localStorage
    async getRoleMessage() {
      const { data: res } = await this.$http.get("/admin/currentuser");
      console.log("permit", res.data.perms);
      let permit = res.data.perms;
      localStorage.setItem("permissions", permit);
    },
    // 获取验证码
    async getidentifyingCode() {
      const { data: res } = await this.$http.get("/admin/captcha");
      if (res.code == 200) {
        this.identifyingCode = res.data.captchaImg;
        this.identifyingCode_token = res.data.token;
      } else {
        this.common.notify("error", "验证码获取失败");

        // this.$message.error("验证码获取失败");
      }
    },
  },
};
</script>
<style  lang='less' scoped>
@import "../assets/css/login.less";
</style>
